<template>
    <div>
        <div class="nav1">
            <div class="logo_box">
                <div class="logo">
                    <img src="@/assets/icon/logo.png" alt/>
                </div>
            </div>
            <ul class="menu_list">
                <!--<li @click="goToPage('dynamic')">-->
                <!--<i class="icon1" :class="{icon1_active:checkCurrentPath('dynamic')}"></i>-->
                <!--<p :class="{title_text_active:checkCurrentPath('dynamic')}">消息</p>-->
                <!--</li>-->
                <li @click="goToPage('cloudSpace/detail/1')">
                    <i class="menu-icon" :class="checkCurrentPath('cloudSpace','cloud-space')"></i>
                    <p :class="checkCurrentPath('cloudSpace','text')">云盘</p>
                </li>
                <!--<li @click="goToPage('group')">-->
                <!--<i class="icon3" :class="{icon3_active:checkCurrentPath('group')}"></i>-->
                <!--<p :class="{title_text_active:checkCurrentPath('group')}">通讯录</p>-->
                <!--</li>-->
                <!--<li @click="goToPage('setting')">-->
                <!--<i class="icon4" :class="{icon4_active:checkCurrentPath('setting')}"></i>-->
                <!--<p :class="{title_text_active:checkCurrentPath('setting')}">设置</p>-->
                <!--</li>-->
            </ul>
            <!--<div class="nav_auxiliary">-->
            <!--<ul>-->
            <!--<li class="add-friend">-->
            <!--<i></i>-->
            <!--</li>-->
            <!--<li class="download">-->
            <!--<i></i>-->
            <!--</li>-->
            <!--</ul>-->
            <!--<div class="up"></div>-->
            <!--</div>-->
        </div>
        <router-view class="content"></router-view>
        <!-- <edit-tab ref="EditTab"></edit-tab> -->
        <!-- <invite-collaboration ref="InviteCollaboration"></invite-collaboration> -->
    </div>
</template>

<script>
  // import EditTab from '../components/EditTab';
  // import InviteCollaboration from "../components/InviteCollaboration";
  import Cookie from 'js-cookie';

  export default {
    name: "home",
    components: {
      // EditTab,
      // InviteCollaboration
    },
    data() {
      return {
        fileList: [],
        currentFolder: {},
        username: "小花",
        titleActive: {
          newsActive: false,
          panActive: true,
          mailListActive: false,
          setUpActive: false
        }
      };
    },
    created() {
    },
    mounted() {
      const NODE = process.env.VUE_APP_NODE;
      let token;
      if (NODE === 'production') {
        token = Cookie.get('access_token', 'ddbes.com')
      } else {
        token = localStorage.getItem('ddbes-token')  //本地登陆
      }
      if (token && token !== '') {
        this.$http.defaults.headers.common['Authorization'] = 'Bearer ' + token
      } else {
        if (NODE === 'production') {
          return window.location.href = this.$config.loginUrl + '?redirect_uri=' + encodeURIComponent(`${window.location.href}`)
        } else {
          return this.$router.push({path: '/setting/login'})
        }
      }
      this.getUserInfo()
    },
    methods: {
      getUserInfo: function () {
        const that = this
        this.$http.get('/user/user/info').then(function (data) {
          if (data.data.code === 1) {
            that.$store.commit('setUserInfo', data.data.data)
            if (that.$route.path === '/') {
              that.$router.push({
                path: "/cloudSpace/detail/1"
              });
            }
          }
        })
      },

      news() {
        // this.$refs.EditTab.init();
      },
      pan() {
        // this.$refs.InviteCollaboration.init();
      },
      mailList() {
      },
      setUp() {
      },
      checkCurrentPath: function (path,className) {
        if (this.$route.path.indexOf(path) > -1) {
          return className + '-active'
        } else {
          return className
        }
      },
      goToPage: function (path) {
        if (this.$route.path !== "/" + path) {
          this.$router.push({
            path: "/" + path
          });
        }
      }
    }
  };
</script>

<style scoped>
    .nav1 {
        width: 64px;
        height: 100vh;
        background-color: #33383d;
        position: relative;
        float: left;
    }

    /* @media screen and (max-height: 650px) {
        .nav1 {
            height:650px;
        }
    } */
    .nav1 .logo_box {
        padding-top: 24px;
        padding-bottom: 25px;
        margin: 0 5px;
        border-bottom: 1px solid #c5c6d7;
    }

    .nav1 .logo {
        width: 36px;
        height: 36px;
        margin: 0 auto;
    }

    .nav1 .logo img {
        width: 100%;
        height: 100%;
    }

    .nav1 .menu_list {
        width: min-content;
        margin: 0 auto;
        color: #72767a;
        padding-top: 30px;
        box-sizing: border-box;
    }

    .nav1 .menu_list li {
        width: 40px;
        margin: 0 auto;
        display: flex;
        /* flex:1; */
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 32px;
        font-size: 12px;
    }

    .nav1 .menu_list li .menu-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        background-image: url("/icon/navigation_icon2.png");
        background-repeat: no-repeat;
        background-size: 140px;
        margin-bottom: 10px;
    }

    .cloud-space {
        background-position: -38px -60px;
    }

    .cloud-space-active {
        background-position: -78px -60px;
    }

    .chats {
        background-position: -38px -17px;
    }

    .chats-active {
        background-position: -80px -17px;
    }

    .mail-list {
        background-position: -35px -109px;
    }

    .mail-list-active {
        background-position: -77px -109px;
    }

    .setting {
        background-position: -36px -155px;
    }

    .setting-active {
        background-position: -77px -155px;
    }

    .text{
        color: #c5c6d6;
    }
    .text-active {
        color: #FFFFFF;
    }

    /*.menu_list .news {*/
    /*margin-top: 36px !important;*/
    /*}*/
    .nav1 .nav_auxiliary {
        position: absolute;
        bottom: 0px;
        left: 0;
    }

    .nav1 .nav_auxiliary {
        width: 54px;
        padding: 0 5px;
    }

    .nav1 .nav_auxiliary ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom: 1px solid #fff;
        margin-bottom: 20px;
    }

    .nav1 .nav_auxiliary ul li {
        width: 22px;
        height: 22px;
        background-color: red;
    }

    .nav1 .nav_auxiliary ul .add-friend {
        background: url("../assets/icon/add_friend.png") no-repeat;
        background-size: 100%;
        margin-bottom: 24px;
    }

    .nav1 .nav_auxiliary ul .add-friend:hover {
        background: url("../assets/icon/add_friend_active.png") no-repeat;
        background-size: 100%;
    }

    .nav1 .nav_auxiliary ul .download {
        background: url("../assets/icon/download.png") no-repeat;
        background-size: 100%;
        margin-bottom: 20px;
    }

    .nav1 .nav_auxiliary ul .download:hover {
        background: url("../assets/icon/download_active.png") no-repeat;
        background-size: 100%;
    }

    .nav1 .nav_auxiliary .up {
        width: 38px;
        height: 38px;
        margin: 0 auto;
        margin-top: 29px;
        margin-bottom: 26px;
        background: url("../assets/icon/rocket.png") no-repeat;
        background-size: 100%;
    }

    .content {
        width: calc(100% - 64px);
        height: 100vh;
        float: right;
    }
</style>
